<template>
  <el-dialog  title="扫码收款中..." v-model="dialogVisible" @close="submit" width="580px" destroy-on-close>
        <el-row>
          <el-col :span="24">
            <div class="main">
              <img class="icon" src="@/assets/svgs/scan.svg"/>
              <div class="amount-info">
                <span class="amount">￥{{payPrice}}</span>
              </div>
              <div class="tips">请使用扫码盒子或者扫描枪，扫描会员付款码！</div>
            </div>
          </el-col>
        </el-row>
        <template #footer>
          <div>
            <el-button type="primary" class="main-button" @click="submit()">扫码完成并打印小票</el-button>
          </div>
        </template>
  </el-dialog>
</template>
<script setup lang="ts" name="scanPay">
import * as CashierApi from '@/api/mall/cashier'
const dialogVisible = ref(false)
const orderId = ref('')
const payPrice = ref(0)


const open = async (orderNo,price) => {
  console.log('price:',price)
  dialogVisible.value = true
  orderId.value = orderNo
  payPrice.value = price
}
const submit = async() => {
  dialogVisible.value = false
  await CashierApi.printOrder({orderId:orderId.value})
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗


</script>
<style lang="scss" scoped>
  .main {
     height: 140px;
     padding-top: 2px;
     text-align: center;
     font-size: 16px;
     .amount-info {
        margin-bottom: 20px;
       .amount {
         font-size: 28px;
       }
     }
     .tips {
        font-size: 14px;
        color: #888888;
     }
  }
</style>
